<template>
<div>

  <h1>{{ip1}}</h1>
  <button @click="getIp1">方法1：点击我获取ip地址</button>
  <el-divider></el-divider>

  <h1>{{ip2}}</h1>
  <button @click="getIp2">方法2：点击我获取ip地址</button>

</div>
</template>

<script>
import jsonp from "vue-jsonp";

export default {
  name: "ip",
  data()
  {
    return{
      ip1:null,
      ip2:null
    }
  },

  computed: {
    change({context},payload)
    {
      this.ip1=payload;
    }

  },
  methods:{

    getIp1()
    {



      // this.getUserIP_2((ip)=>{console.log(this)});

      let key= "VBABZ-YDOC5-QDGIA-QMJVG-DHSY5-7TBWV"  //这个key就是你申请的密钥
      let output="jsonp";
      let url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口

      //说明：Object.assign() 为 es6 javascript对象方法，功能是合并多个对象数据
      this.$jsonp(url, Object.assign({key},{output},))
          .then(res => {
            let data=res.result;
            let nation=data.ad_info.nation;
            let province=data.ad_info.province;
            let city=data.ad_info.city;

            this.ip1=nation+"-"+province+"-"+city;
          })
          .catch(error => {
            this.ip1=error;
            console.log(error);
          });


      //Test: Print the IP addresses into the console
    },
    getUserIP(){



      var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
      if (RTCPeerConnection) (()=>{
        var rtc = new RTCPeerConnection()
        rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道
        rtc.createOffer( offerDesc => { //创建并存储一个sdp数据
          rtc.setLocalDescription(offerDesc)
        }, e => { console.log(e)})
        rtc.onicecandidate =(evt) => { //监听candidate事件
          if (evt.candidate) {
            var ip_addr = evt.candidate.address
            this.ip1=ip_addr;
            // localStorage.setItem('ip_addr',ip_addr)
            console.log(evt)

          }}
      })()
      else{console.log("目前仅测试了chrome浏览器OK")}
    },

    // showPosition(position) {
    //   console.log(position);
    //   console.log(position.coords);
    //   // this.latitude = position.coords.latitude;
    //   // this.longitude = position.coords.longitude;
    // },
    // errorPosition(error) {
    //   switch (error.code) {
    //       // 不允许获取当前位置
    //     case error.PERMISSION_DENIED:
    //       this.errorPositionTxt = "不允许获取当前位置";
    //       break;
    //       // 无法获取当前位置
    //     case error.POSITION_UNAVAILABLE:
    //       this.errorPositionTxt = "无法获取当前位置";
    //       break;
    //       // 获取位置的请求超时。
    //     case error.TIMEOUT:
    //       this.errorPositionTxt = "获取位置请求超时。";
    //       break;
    //       // 获取位置操作超时
    //     case error.UNKNOWN_ERROR:
    //       this.errorPositionTxt = "获取位置操作超时";
    //       break;
    //   }
    // },


//     getUserIP_2:function getIPs(callback){
//   var ip_dups = {};
//
//   //compatibility for firefox and chrome
//   var RTCPeerConnection = window.RTCPeerConnection
//       || window.mozRTCPeerConnection
//       || window.webkitRTCPeerConnection;
//
//   //bypass naive webrtc blocking
//   if (!RTCPeerConnection) {
//     var iframe = document.createElement('iframe');
//     //invalidate content script
//     iframe.sandbox = 'allow-same-origin';
//     iframe.style.display = 'none';
//     document.body.appendChild(iframe);
//     var win = iframe.contentWindow;
//     window.RTCPeerConnection = win.RTCPeerConnection;
//     window.mozRTCPeerConnection = win.mozRTCPeerConnection;
//     window.webkitRTCPeerConnection = win.webkitRTCPeerConnection;
//     RTCPeerConnection = window.RTCPeerConnection
//         || window.mozRTCPeerConnection
//         || window.webkitRTCPeerConnection;
//   }
//
//   //minimal requirements for data connection
//   var mediaConstraints = {
//     optional: [{RtpDataChannels: true}]
//   };
//
//   //firefox already has a default stun server in about:config
//   //    media.peerconnection.default_iceservers =
//   //    [{"url": "stun:stun.services.mozilla.com"}]
//   var servers = undefined;
//
//   //add same stun server for chrome
//   if(window.webkitRTCPeerConnection)
//     servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
//
//   //construct a new RTCPeerConnection
//   var pc = new RTCPeerConnection(servers, mediaConstraints);
//
//   //listen for candidate events
//   pc.onicecandidate = function(ice){
//
//     //skip non-candidate events
//     if(ice.candidate){
//
//       //match just the IP address
//       var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/
//       var ip_addr = ip_regex.exec(ice.candidate.candidate)[1];
//
//       //remove duplicates
//       if(ip_dups[ip_addr] === undefined)
//         callback(ip_addr);
//
//       ip_dups[ip_addr] = true;
//     }
//   };
//
//   //create a bogus data channel
//   pc.createDataChannel("");
//
//   //create an offer sdp
//   pc.createOffer(function(result){
//
//     //trigger the stun server request
//     pc.setLocalDescription(result, function(){}, function(){});
//
//   }, function(){});
// },


    getIp2(){

      this.ip2=returnCitySN['cip'];

    }
  }
}
</script>

<style scoped>

</style>
